<template>
	<view style="height: 100%;width: 100%;">
		<view style="margin:30rpx 0 0 24.77rpx;margin-bottom: 100rpx;">
			<view v-for="(itme,index) in title_url" :key="index" style="display: flex;width: 700.64rpx;height: 142.55rpx;background: #FFFFFF;border-radius: 18.12rpx;margin-bottom: 11.47rpx;align-items: center;box-sizing: border-box;padding:0 27.18rpx 0 39.26rpx;justify-content: space-between;">
				<view>
					<view style="font-size: 29rpx;font-weight: bold;color: #414141;letter-spacing: 2rpx;">{{itme.title}}</view>
					<view style="font-size: 24.15rpx;color: #BEBEBE;font-weight: bold;margin-top: 21rpx;letter-spacing: 2rpx;">
						{{itme.time? '预约时间' + itme.time : '未预约'}}
					</view>
				</view>
				<view style="width: 94.82rpx;height: 94.82rpx;border-radius: 12.08rpx;line-height: 94.82rpx;text-align: center;font-size: 21.744rpx;" @tap="yuyue_(itme.title,index)" :class="itme.biao == '预约' ? 'yue' : 'list'">{{itme.biao}}</view>
			</view>
		</view>
		<view style="height:78.51rpx ;width: 750rpx;background: #FF7300;position: fixed;bottom: 0;line-height: 78.51rpx;text-align: center;font-size:26.58rpx ;color: #FFFFFF;font-weight: bold;letter-spacing: 2rpx;padding-bottom: 40rpx;" @tap="payment">
			<text>自由约课可拨打电话 点击拨打</text>
		</view>
	</view>
</template>
<script>
	export default {
		data(){
			return {
				title_url:[],
				num:1,
				study_id:"",
				id:"",
				zhujian_id: "",
				payCourseCount: "",
				payNum: "",
				user_id: "",
				shang_id: "",
				yuguo: [],
				url_list_todo: [],
				contact_telephone: ""
			}
		},
		methods:{
		async	yuyue(){
				const res = await this.$myRequest({
					url:"/userStudyCard/queryPayInfo",
					methods:"get",
					data:{
						id: this.zhujian_id
					}
				})
				this.payCourseCount = res.data.payCourseCount
				this.payNum = res.data.payNum
			},
			yuyue_(itme,index){
				let data = {
					mechanism_id: this.id,
					num: index + 1,
					title:itme,
					shangping_id: this.study_id,
					shang_id: this.zhujian_id
				}
				uni.navigateTo({
					url:"/pages/World/publishViewpoint/publishViewpoint?num=" + encodeURIComponent(JSON.stringify(data))
				})
				
			},
			async	chaxun(){
				    let me = this
					const res = await me.$myRequest({
						url:"/userAppointment/queryOfflineSchedule",
						data:{
							study_card_id: this.zhujian_id
						}
					})
					if(res.code == 0 && res.data.length > 0){
						me.yuguo = res.data
						let add = []
						let fo = []
						res.data.forEach((itme) => {
							let data = {
								data:itme.title,
								time:itme.start_time.substring(0,16)
							}
							fo.push(data)
						})
						fo = Array.from(new Set(fo))
						fo.forEach((itme) => {
							me.title_url.forEach((itmes) => {
								if(itme.data == itmes.title){
									itmes.biao = "已预约"
									itmes.time = itme.time
								}
							})
						})
					}
				},
		    payment(){
			    uni.makePhoneCall({
					 phoneNumber: this.contact_telephone
				})
			}
		},
		onLoad(option) {
			 const item = JSON.parse(decodeURIComponent(option.num))
			 let url = item.map.masterSetPriceEntity.titile_url
			 this.contact_telephone = item.map.mechanismEntity.contact_telephone
			 let title_url = url.split("#$*")
			 this.study_id = item.studycard_id
			 this.id = item.mechanism_id
			 this.zhujian_id = item.id
			 let arry_list = []
			title_url.forEach((itme) => {
				let data = {
					title: itme,
					biao: "预约"
				}
				arry_list.push(data)
			})
			this.title_url = arry_list
			 try{
				 let val = uni.getStorageSync('userif_list')
				 this.user_id = val.user_id
			 }catch(e){}
			this.chaxun()
			this.yuyue()
		},
		onShow() {
			
		}
	}
</script>
<style lang="scss" scoped>
	*{
		letter-spacing: 10rpx;
	}
	.yue{
		border: 1px solid #FF7300;
		color: #FF7300;
	}
	.list{
		border: 1px solid #BEBEBE;
		color: #BEBEBE;
	}
</style>